<template>
  <div class="market-evaluation" style="width: 500px; height: 280px;">
    <!-- 标题区域 -->
    <div class="title-bar" style="background-color: #0f2035; color: #fff; padding: 10px 15px; border-radius: 8px 8px 0 0; font-size: 14px; font-weight: bold;">
      <span style="margin-right: 10px;">今日大厅满意度评价分析</span>
    </div>
    
    <!-- 内容区域 -->
    <div class="content" style="display: flex; height: 280px; background-color: #0f2035; padding: 10px; border-radius: 0 0 8px 8px;">
      <!-- 左侧饼图 -->
      <div class="pie-chart" style="flex: 1; margin-right: 20px;">
        <div id="pieChart" style="width: 100%; height: 100%;"></div>
      </div>
      
      <!-- 右侧柱状图 -->
      <div class="bar-chart" style="flex: 2;">
        <div id="barChart" style="width: 100%; height: 100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, onUnmounted } from 'vue';

export default {
  name: 'Shichang',
  setup() {
    let pieChart = null;
    let barChart = null;

    onMounted(() => {
      // 初始化饼图
      const pieDom = document.getElementById('pieChart');
      if (pieDom) {
        pieChart = echarts.init(pieDom);
        
        const pieOption = {
          backgroundColor: '#0f2035',
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '评价分布',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 90, name: '好评', itemStyle: { color: '#00b96b' } },
                { value: 10, name: '差评', itemStyle: { color: '#ff6b6b' } }
              ]
            }
          ]
        };
        
        pieChart.setOption(pieOption);
      }

      // 初始化柱状图
      const barDom = document.getElementById('barChart');
      if (barDom) {
        barChart = echarts.init(barDom);
        
        const barOption = {
          backgroundColor: '#0f2035',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['办事部门A', '办事部门B', '办事部门C', '办事部门D', '办事部门E'],
            axisLabel: {
              color: '#fff',
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                color: '#38bdf8'
              }
            }
          },
          yAxis: {
            type: 'value',
            max: 40,
            axisLabel: {
              color: '#fff',
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                color: '#38bdf8'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#38bdf8',
                opacity: 0.3
              }
            }
          },
          series: [
            {
              name: '好评',
              type: 'bar',
              barWidth: '20%',
              data: [36, 27, 21, 36, 27],
              itemStyle: {
                color: '#00b96b'
              }
            },
            {
              name: '差评',
              type: 'bar',
              barWidth: '20%',
              data: [10, 9, 12, 10, 9],
              itemStyle: {
                color: '#ff6b6b'
              }
            }
          ]
        };
        
        barChart.setOption(barOption);
      }

      // 添加窗口大小调整事件
      window.addEventListener('resize', () => {
        if (pieChart) {
          pieChart.resize();
        }
        if (barChart) {
          barChart.resize();
        }
      });
    });

    onUnmounted(() => {
      // 组件销毁时释放资源
      if (pieChart) {
        pieChart.dispose();
      }
      if (barChart) {
        barChart.dispose();
      }
    });

    return {};
  }
};
</script>

<style scoped>
.market-evaluation {
  width: 500px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
}

.title-bar {
  background-color: #0f2035;
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
  font-weight: bold;
}

.content {
  display: flex;
  height: 140px;
  background-color: #0f2035;
  padding: 10px;
  border-radius: 0 0 8px 8px;
}

.pie-chart {
  flex: 1;
  margin-right: 20px;
}

.bar-chart {
  flex: 2;
}
</style>